<template>
    <div class="common-layout">
        <el-container>
            <el-header class="header">
                <el-row>
                    <el-col :span="4">
                        <h1>学生后台管理系统</h1>
                    </el-col>
                    <el-col :span="1" :offset="19">
                        <el-dropdown trigger="click">
                            <el-avatar
                                class="image-head"
                                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                            />
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item>{{
                                        user.username
                                    }}</el-dropdown-item>
                                    <el-dropdown-item
                                        :icon="Unlock"
                                        divided
                                        @click="handleLogout"
                                    >
                                        登出
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </el-col>
                </el-row>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu
                        active-text-color="#ffd04b"
                        background-color="#545c64"
                        class="el-menu-vertical-demo"
                        text-color="#fff"
                        :router="true"
                        :default-openeds="['1','2']"
                        @open="handleOpen"
                        @close="handleClose"
                    >
                        <el-sub-menu index="1">
                            <template #title>
                                <span>权限管理</span>
                            </template>
                            <el-menu-item index="/manage/user">
                                <el-icon><icon-menu /></el-icon>
                                <span>用户管理</span>
                            </el-menu-item>
                            <el-menu-item index="/manage/role">
                                <el-icon><document /></el-icon>
                                <span>角色管理</span>
                            </el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="2">
                            <template #title>
                                <span>统计</span>
                            </template>
                            <el-menu-item index="/manage/sellTotal">
                                <el-icon><icon-menu /></el-icon>
                                <span>销售统计</span>
                            </el-menu-item>
                            <el-menu-item index="/manage/monthSellTotal">
                                <el-icon><document /></el-icon>
                                <span>月销售统计</span>
                            </el-menu-item>
                        </el-sub-menu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <RouterView />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script setup>
import { Unlock, Plus } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { onMounted, ref } from "vue";
import { getUser } from "../service/user";
const router = useRouter();
const user = ref({});
function handleLogout() {
    localStorage.removeItem("token");
    router.push("/login");
}
onMounted(async () => {
    let res = await getUser();
    console.log("Res:",res);
    user.value = res.data;
});
</script>
<style scoped>
h1 {
    margin: 0;
    line-height: 60px;
}
.header {
    color: white;
    background-color: black;
    height: 60px;
}
.image-head {
    margin-top: 10px;
}
.el-menu,
.el-aside,
.el-container,
.common-layout {
    height: 100%;
}
</style>
